<template>
  <div class="post-card">
    <div class="post-header">
      <div class="user-info">
        <el-avatar :size="40" :src="post.author.avatar" />
        <div class="user-details">
          <div class="user-main">
            <span class="user-name">{{ post.author.name }}</span>
            <el-tag 
              :type="post.author.type === 'farmer' ? 'success' : 'primary'" 
              size="small"
            >
              {{ post.author.type === 'farmer' ? '农夫' : '买家' }}
            </el-tag>
          </div>
          <div class="post-meta">
            <span class="post-time">{{ formatDate(post.createTime) }}</span>
            <span class="post-privacy">
              {{ post.privacy === 'public' ? '公开' : '私密' }}
            </span>
          </div>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="post-actions-menu">
        <el-dropdown trigger="click">
          <el-button type="text" size="small" class="more-btn">
            <el-icon><More /></el-icon>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="$emit('edit-post', post)">
                <el-icon><Edit /></el-icon>
                编辑帖子
              </el-dropdown-item>
              <el-dropdown-item @click="$emit('delete-post', post)" divided>
                <el-icon><Delete /></el-icon>
                <span style="color: #f56c6c;">删除帖子</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div class="post-content">
      <p class="post-text">{{ post.content }}</p>

      <!-- 关键词展示 -->
      <div v-if="post.keywords && post.keywords.length" class="post-keywords">
        <el-tag 
          v-for="(keyword, index) in post.keywords" 
          :key="index"
          type="info" 
          size="small"
          class="keyword-tag"
        >
          #{{ keyword }}
        </el-tag>
      </div>

      <div v-if="post.images && post.images.length" class="post-images">
        <div 
          v-for="(image, index) in post.images" 
          :key="index"
          class="post-image"
          :style="{ backgroundImage: `url(${image})` }"
          @click="$emit('preview-image', image)"
        >
          <div class="image-overlay">
            <el-icon><ZoomIn /></el-icon>
          </div>
        </div>
      </div>
    </div>

    <div class="post-actions">
      <div class="action-group">
        <button 
          :class="['action-btn', { active: post.userAction === 'like' }]"
          @click="handleLike"
        >
          <el-icon><Star /></el-icon>
          <span class="action-count">{{ post.likes }}</span>
        </button>
        
        <button 
          :class="['action-btn', { active: post.userAction === 'dislike' }]"
          @click="handleDislike"
        >
          <el-icon><CircleClose /></el-icon>
          <span class="action-count">{{ post.dislikes }}</span>
        </button>
        
        <button 
          class="action-btn"
          @click="toggleComments"
        >
          <el-icon><ChatDotRound /></el-icon>
          <span class="action-count">{{ post.comments.length }}</span>
        </button>
      </div>
    </div>

    <!-- 评论区域 -->
    <div class="comments-section" v-if="post.showComments">
      <!-- 评论列表 -->
      <div class="comments-list" v-if="post.comments.length > 0">
        <div 
          v-for="comment in post.comments" 
          :key="comment.id"
          class="comment-item"
        >
          <div class="comment-header">
            <el-avatar :size="32" :src="comment.author.avatar" />
            <div class="comment-author">
              <span class="author-name">{{ comment.author.name }}</span>
              <span class="comment-time">{{ formatDate(comment.time) }}</span>
            </div>
          </div>
          <p class="comment-content">{{ comment.content }}</p>
          
          <!-- 回复列表 -->
          <div v-if="comment.replies && comment.replies.length" class="replies-list">
            <div 
              v-for="reply in comment.replies" 
              :key="reply.id"
              class="reply-item"
            >
              <div class="reply-header">
                <el-avatar :size="28" :src="reply.author.avatar" />
                <div class="reply-author">
                  <span class="author-name">{{ reply.author.name }}</span>
                  <span class="reply-time">&nbsp;&nbsp;&nbsp;{{formatDate(reply.time) }}</span>
                </div>
              </div>
              <p class="reply-content">{{ reply.content }}</p>
            </div>
          </div>

          <!-- 回复输入框 -->
          <div class="reply-input">
            <el-input
              v-model="comment.replyText"
              placeholder="回复..."
              size="small"
              @keyup.enter="handleReply(comment)"
            >
              <template #append>
                <el-button 
                  size="small" 
                  type="primary"
                  @click="handleReply(comment)"
                  :disabled="!comment.replyText?.trim()"
                >
                  发送
                </el-button>
              </template>
            </el-input>
          </div>
        </div>
      </div>

      <!-- 空评论状态 -->
      <div v-else class="empty-comments">
        <el-empty description="暂无评论" :image-size="80" />
      </div>
      
      <!-- 添加评论表单 -->
      <div class="comment-form">
        <el-input
          v-model="newCommentText"
          type="textarea"
          :rows="3"
          placeholder="写下你的评论..."
          resize="none"
          maxlength="500"
          show-word-limit
          @keyup.enter="addComment"
        />
        <div class="comment-actions">
          <el-button type="primary" @click="addComment" :disabled="!newCommentText.trim()">
            <el-icon><Promotion /></el-icon>
            发表评论
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  post: {
    type: Object,
    required: true
  },
  currentUser: {
    type: Object,
    required: true
  }
})

const emit = defineEmits([
  'like',
  'dislike',
  'toggle-comments',
  'add-comment',
  'add-reply',
  'preview-image',
  'edit-post',
  'delete-post'
])

// 新评论文本
const newCommentText = ref('')

// 格式化日期的方法
const formatDate = (date) => {
  if (!date) return ''
  
  const now = new Date()
  const targetDate = new Date(date)
  const diff = now - targetDate
  
  if (diff < 60000) {
    return '刚刚'
  } else if (diff < 3600000) {
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) {
    return `${Math.floor(diff / 3600000)}小时前`
  } else if (diff < 604800000) {
    return `${Math.floor(diff / 86400000)}天前`
  } else {
    return targetDate.toLocaleDateString('zh-CN', {
      month: 'short',
      day: 'numeric'
    })
  }
}

// 点赞处理
const handleLike = () => {
  emit('like', props.post.id)
}

// 点踩处理
const handleDislike = () => {
  emit('dislike', props.post.id)
}

// 切换评论显示
const toggleComments = () => {
  emit('toggle-comments', props.post.id)
}

// 添加评论
const addComment = () => {
  if (!newCommentText.value.trim()) {
    return
  }
  
  // 发出添加评论事件
  emit('add-comment', {
    postId: props.post.id,
    content: newCommentText.value.trim(),
    author: props.currentUser
  })
  
  // 清空输入框
  newCommentText.value = ''
}

// 处理回复
const handleReply = (comment) => {
  if (!comment.replyText?.trim()) {
    return
  }
  
  // 发出添加回复事件
  emit('add-reply', {
    postId: props.post.id,
    commentId: comment.id,
    content: comment.replyText.trim(),
    author: props.currentUser
  })
  
  // 清空回复输入框
  comment.replyText = ''
}
</script>

<style scoped>
.post-card {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid transparent;
  position: relative;
}

.post-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #e5e7eb;
}

.post-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

.user-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
}

.user-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-main {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-name {
  font-weight: 600;
  color: #1f2937;
  font-size: 1rem;
  line-height: 1.2;
}

.post-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.post-time {
  font-size: 0.875rem;
  color: #6b7280;
}

.post-type {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.post-type.farmer {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.post-type.buyer {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.post-privacy {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  background: #f3f4f6;
  color: #6b7280;
}

/* 操作菜单 */
.post-actions-menu {
  margin-left: auto;
}

.more-btn {
  color: #6b7280;
  padding: 4px;
}

.more-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

/* 帖子内容 */
.post-content {
  margin-bottom: 16px;
}

.post-text {
  color: #374151;
  line-height: 1.6;
  margin-bottom: 16px;
  white-space: pre-wrap;
  word-break: break-word;
}

.post-keywords {
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.keyword-tag {
  background: linear-gradient(135deg, #fef7ed, #fed7aa);
  border-color: #fdba74;
  color: #9a3412;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.keyword-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.post-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.post-image {
  height: 120px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.post-image:hover {
  transform: scale(1.02);
}

.post-image:hover .image-overlay {
  opacity: 1;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 帖子操作 */
.post-actions {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
}

.action-group {
  display: flex;
  gap: 24px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 0.875rem;
  font-weight: 500;
}

.action-btn:hover {
  background: #f8fafc;
  color: #374151;
  transform: translateY(-1px);
}

.action-btn.active {
  background: #E8F5E9;
  color: #2E7D32;
}

.action-btn.active:hover {
  background: #d1e7dd;
}

.action-count {
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

/* 评论区域 */
.comments-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.empty-comments {
  margin-bottom: 20px;
}

.comments-list {
  margin-bottom: 20px;
}

.comment-item {
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.comment-author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.author-name {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
}

.comment-time,
.reply-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

.comment-content {
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 12px;
  padding-left: 44px;
}

/* 回复列表 */
.replies-list {
  margin-left: 44px;
  margin-top: 12px;
  border-left: 2px solid #e5e7eb;
  padding-left: 16px;
}

.reply-item {
  padding: 12px 0;
  border-bottom: 1px solid #f8fafc;
}

.reply-item:last-child {
  border-bottom: none;
}

.reply-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.reply-content {
  color: #6b7280;
  font-size: 0.875rem;
  line-height: 1.4;
  padding-left: 36px;
}

/* 回复输入框 */
.reply-input {
  margin-top: 12px;
  padding-left: 44px;
}

/* 评论表单 */
.comment-form {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.comment-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .post-card {
    padding: 16px;
    border-radius: 8px;
  }
  
  .post-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .post-time {
    align-self: flex-end;
  }
  
  .post-images {
    grid-template-columns: 1fr;
  }
  
  .post-image {
    height: 200px;
  }
  
  .action-group {
    gap: 16px;
  }
  
  .action-btn {
    padding: 6px 12px;
  }
  
  .comment-content {
    padding-left: 0;
  }
  
  .reply-input {
    padding-left: 0;
  }
  
  .replies-list {
    margin-left: 20px;
  }
  
  .reply-content {
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .post-card {
    padding: 12px;
  }
  
  .user-info {
    gap: 8px;
  }
  
  .action-group {
    gap: 12px;
  }
  
  .action-btn {
    padding: 4px 8px;
    font-size: 0.8rem;
  }
  
  .comment-form {
    padding: 12px;
  }
}
</style>